<script setup lang="ts">
import { ref, reactive } from "vue";
import CapsuleChart from "../capsule-chart";
//import { ranking } from "@/api";
import { ElMessage } from "element-plus";

const config = ref({
  showValue: true,
  unit: "次",
});
const data = ref([]);
const getData = () => {
  var res = [{"value":767,"name":"金昌市"},{"value":686,"name":"延安市"},{"value":677,"name":"澳门半岛"},{"value":559,"name":"海外"},{"value":479,"name":"甘南藏族自治州"},{"value":299,"name":"哈密地区"},{"value":242,"name":"晋中市"},{"value":238,"name":"九龙"}];
  // ranking()
  //   .then((res) => {
  //     console.log("右中--报警排名", res);
  //     if (res.success) {
        data.value = res;
        console.log(data.value)
    //   } else {
    //     ElMessage({
    //       message: res.msg,
    //       type: "warning",
    //     });
    //   }
    // })
    // .catch((err) => {
    //   ElMessage.error(err);
    // });
};
getData();
</script>

<template>
  <div class="right_bottom">
    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
}
</style>
